<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="container"></div>
    <script src="/xuni/bundle.js"></script>
    <script>
      //模板字符串
      var tmeplateStr = `
              <ul>
                 {{#arr2}}
                     <li class='j'>
                       {{name}}的爱好是:
                       <ol>
                         {{#hobbies}}
                             <li>{{.}}</li>
                         {{/hobbies}}
                       </ol>
                     </li>
                 {{/arr2}}
             </ul>
      `;
      //数据
      const data = {
        arr2: [
          {
            name: 'ming',
            age: 12,
            sex: '男 ',
            hobbies: ['吃饭', '睡觉', '编程'],
          },
          {
            name: 'hong',
            age: 11,
            sex: '女 ',
            hobbies: ['画画', '唱歌', '编程'],
          },
          {
            name: 'qiang',
            age: 13,
            sex: '男 ',
            hobbies: ['健身', '睡觉', '编程'],
          },
        ],
      };
      //调用render
      var domStr = myMustache.render(tmeplateStr, data);
      //上树
      var container = document.getElementById('container');
      container.innerHTML = domStr;
    </script>
  </body>
</html>
